<template>
  <div class="home" ref="commentList" id="comment">
    <div class="waterfull">
      <div class="item">
        <comment-card v-for="comment in comments" v-bind:comment="comment" :listType="1"/>
      </div>
      <div class="item">
        <comment-card v-for="comment in comments" v-bind:comment="comment" :listType="2"/>
      </div>
      <div class="item">
        <comment-card v-for="comment in comments" v-bind:comment="comment" :listType="3"/>
      </div>
      <div class="item">
        <comment-card v-for="comment in comments" v-bind:comment="comment" :listType="4"/>
      </div>
      <div class="item">
        <comment-card v-for="comment in comments" v-bind:comment="comment" :listType="5"/>
      </div>
    </div>
    <div class="loading">
      <md-snackbar class="md-accent" md-position="left" :md-duration="Infinity" :md-active.sync="loading">
        <span>正在加载。。。</span>
      </md-snackbar>
    </div>
  </div>
</template>

<script>
import CommentCard from './comments/Card'
export default {
  name: 'home',
  components: {
    CommentCard
  },
  data: () => ({
    comments: [],
    curPage: 1,
    totalPage: 1,
    loading: false,
    isMoreData: false
  }),
  methods: {
    getComments(reset = false) {
      this.loading = true
      let page = reset ? 1 : this.curPage + 1
      let requestData = {
        url: '/api/movies/comments?include=author,movie&page=' + page
      }
      this.$ajax.request(requestData).then((res) => {
        if (res.status === 200) {
          res.data.data.forEach((item, index) => {
            let id = '' + index
            let key = id.substr(id.length - 1, 1)
            if (key <= 1) {
              res.data.data[index]['list_key'] = 1
            } else if( key <= 3) {
              res.data.data[index]['list_key'] = 2
            } else if( key <= 5) {
              res.data.data[index]['list_key'] = 3
            } else if( key <= 7) {
              res.data.data[index]['list_key'] = 4
            } else if( key <= 9) {
              res.data.data[index]['list_key'] = 5
            }
            console.log(res.data.data[index]['list_key'])
          });
          this.comments = reset ? res.data.data : this.comments.concat(res.data.data)
          this.curPage = res.data.meta.pagination.current_page
          this.totalPage = res.data.meta.pagination.total_pages
          this.$nextTick(() => {
            this.pullingDownUp()
          })
        }

      }).catch((error) => {
        this.pullingDownUp()
      })
    },
    pullingDownUp () {
      this.loading = false
      if (this.curPage < this.totalPage) this.isMoreData = true
    },
    scroll() {
      let scrollTop = document.querySelector('.md-app-container').scrollTop
      let height = document.querySelector('.md-app-container').scrollHeight
      let clientHeight = document.body.clientHeight

      if (scrollTop + 200 + clientHeight >= height && !this.loading && this.isMoreData) {
        this.getComments()
      }
    }
  },
  mounted() {
    this.container = document.querySelector('.md-app-container')
    this.container.addEventListener('scroll',this.scroll, true)
  },
  created() {
    this.$nextTick(() => {
      this.getComments(true)
    })
  },
  destroyed () {
    this.container.removeEventListener('scroll', this.scroll, true)
  }
}
</script>
<style lang="scss" scoped>
  .home {
    max-width: 1680px;
    margin: 0 auto;
  }
  .waterfull {
    column-count: 5;
  }
  .item{
　　box-sizing: border-box;
　　break-inside: avoid;
　　padding: 10px;
}
.item-content{
　　display: flex;
　　flex-direction: column;
　　justify-content: center;
　　align-items: center;
　　padding: 10px;
　　height: auto;
　　font-size: 20px;
　　color: #686868;
　　box-sizing: border-box;
　　border: 1px solid #ccc;
}

</style>

